<template>
  <div id="app">
    <el-container>
      <el-header>
        <div class="header-content">
          工资预测系统
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div class="function-selection">
            功能选择
          </div>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>数据分析</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link :to="{ path: 'Ckaifa', query: { type: 1 } }">C++</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link :to="{ path: 'Ckaifa', query: { type: 2 } }">Java</router-link>
                </el-menu-item>
                <el-menu-item index="1-3">
                  <router-link :to="{ path: 'Ckaifa', query: { type: 3 } }">python</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>图表分析</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">
                  <router-link to="Ctubiao">C++技能分布图</router-link>
                </el-menu-item>
                <el-menu-item index="2-2">
                  <router-link to="bingtu">Java学历分布图</router-link>
                </el-menu-item>
                <el-menu-item index="2-3">
                 <router-link to="zhexiantu">python折线图</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span><router-link to="Cyuce">预测工资</router-link></span>
              </template>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
*{
  margin: 0;
  padding: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.el-footer {
  background-color: #eaffd0;
  color: #333;
  text-align: center;
  line-height: 60px;
  height: 20vh !important;
}
.el-header{
  background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
  color: #333;
  text-align: center;
  line-height: 60px;
  height: 20vh !important;
}
.header-content{
  margin: 0 auto;
  line-height: 186px;
}
ul a{
  text-decoration: none;
  color: black;
}
ul a:active {
  color: blue;
}
ul li:active{
  color: blue;
}
.el-aside {
  background-color: #f6f6f6;
  color: #333;
  text-align: center;
  height: 80vh !important;
  padding: 0;
}
#main {
  background-color: #f6f6f6;
  position: absolute; /* 使用绝对定位 */
  top: 50%; /* 垂直方向居中 */
  left: 5%; /* 调整位置，靠右一些 */
  transform: translateY(-50%); /* 使元素真正居中 */
}
.el-main {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  background-size: cover;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 80vh !important;
  position: relative; /* 相对定位容器 */
}

form{
 background-color: #f6f6f6;
  width: 100%;
  height: 100%;
}

.el-submenu__title{
  background-color: #f6f6f6;
}
.body > .el-container {
  margin-bottom: 40px;
}

.header-content {
  font-size: 24px;
  font-weight: bold;
}

.main-content {
  font-size: 18px;
}

.function-selection {
  font-size: 18px;
  font-weight: bold;
  margin: 20px;
}
</style>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
